<template>
    <!-- pages/labelManage/labelManage.wxml -->
    <view class="page">
		<cu-custom bgColor="bg-gray" :isBack="true">
			<block slot="content">标签库管理</block>
		</cu-custom>
        <view class="addk">
            <button @tap="addLabel" class="addbtn" type="primary" :plain="true">+ 新增</button>
        </view>
        <scroll-view  :scroll-y="true" class="list_1 tab-list-content" :refresher-enabled="true">
            <view class="list-items_1-0" v-for="(item, index) in list" :key="index">
                <view class="image-text_1-0">
                    <view class="box_5-0"></view>
                    <text lines="1" class="text-group_1-0">{{ item.name }}</text>
                </view>
				
				<view class="delicon flex align-center">
					<image
						:data-id="item.id"
						@tap.native="edit"  src="../../static/edt.png" style="width: 60upx;height: 60upx;" mode=""></image>
					<image
						:data-id="item.id"
						@tap.native="remove"  src="../../static/del.png" style="width: 60upx;height: 60upx;" mode=""></image>
				</view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
// pages/labelManage/labelManage.js
import api from '../../utils/api';
const app = getApp();
export default {
    components: {},
    data() {
        return {
            list: [],
            scrollHeight: 0
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        this.loadMore();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
  
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        edit(e) {
            let that = this;
            let id = e.currentTarget.dataset['id'];
            let editIndex = -1;
            this.list.forEach((item, index) => {
                if (item.id == id) {
                    editIndex = index;
                    return true;
                }
            });
            let labelName = this.list[editIndex].name;
            uni.showModal({
                title: '编辑标签',
                content: labelName,
                editable: true,

                success(res) {
                    if (res.confirm) {
                        var content = res.content.trim();

                        if (content.length > 0) {
                            if (content.length <= 6) {
                                that.saveLabel(id, content);
                            } else {
                                uni.showToast({
                                    title: 'title',
                                    icon: 'error',
                                    duration: 1000
                                });
                            }
                        }
                    }
                }
            });
        },

        remove(e) {
            let that = this;
            let id = e.currentTarget.dataset['id'];
            let labelName = '';
            this.list.some((item) => {
                if (item.id == id) {
                    labelName = item.name;
                    return true;
                }
            });
            uni.showModal({
                title: '提示',
                content: '确认要删除标签[' + labelName + ']',

                success(res) {
                    if (res.confirm) {
                        that.requestRemove(id);
                    }
                }
            });
        },

        requestRemove(id) {
            let that = this;
            uni.showLoading({
                title: '删除中...'
            });
            api.post('/rest/api/delLabel', {
                id: id
            })
                .then((res) => {
                    uni.hideLoading();
                    let list = that.list;
                    var delIndex = -1;
                    list.some((item, index) => {
                        if (item.id == id) {
                            delIndex = index;
                            return true;
                        }
                    });
                    list.splice(delIndex, 1);
					that.list = list;
                    uni.showToast({
                        title: '删除成功',
                        icon: 'success',
                        duration: 1000
                    });
                })
                .catch((err) => {
                    uni.hideLoading();
                });
        },

        addLabel() {
            let that = this;
            uni.showModal({
                title: '添加标签',
                placeholderText: '输入标签名称',
                editable: true,

                success(res) {
                    if (res.confirm) {
                        var content = res.content.trim();

                        if (content.length > 0) {
                            if (content.length <= 6) {
                                that.saveLabel(null, content);
                            } else {
                                uni.showToast({
                                    title: 'title',
                                    icon: 'error',
                                    duration: 1000
                                });
                            }
                        }
                    }
                }
            });
        },

        saveLabel(id, content) {
            let that = this;
            let data = {
                name: content
            };

            if (id) {
                data['id'] = id;
            }

            console.log(data);
            api.post('/rest/api/saveLabel', data)
                .then((res) => {
                    uni.hideLoading();
                    let list = that.list;

                    if (id) {
                        //更新操作
                        list.forEach((item) => {
                            if (item.id == id) {
                                item['name'] = res.data.name;
                                return true;
                            }
                        });
                    } else {
                        //新增操作
                        list.push(res.data);
                    }

                    console.log(list);
                    that.list = list;
                    app.globalData.successTip('保存成功');
                })
                .catch((err) => {
                    uni.hideLoading();
                });
        },

        loadMore() {
            var that = this; //页面累加

            uni.showLoading({
                title: '加载中...'
            }); //请求服务器

            api.get('/rest/api/queryMyLabel', {
                page: 1,
                pageSize: 1000
            })
                .then((res) => {
                    uni.hideLoading();
                    that.list = res.data;
                })
                .catch((err) => {
                    uni.hideLoading();
                });
        }
    }
};
</script>
<style>
/* pages/labelManage/labelManage.wxss */
.page {
    background-color: rgba(242, 242, 242, 1);
    position: fixed;
    width: 750rpx;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 28rpx 0 10rpx 0;
}

.list_1 {
    padding: 10rpx 40rpx;
}

.list-items_1-0 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 30rpx;
    margin-bottom: 20rpx;
    flex-direction: row;
    display: flex;
    padding: 10rpx 20rpx 10rpx 32rpx;
}

.image-text_1-0 {
    flex-direction: row;
    display: flex;
    justify-content: space-between;
    margin: 8rpx 0 8rpx 0;
}

.box_5-0 {
    background-color: rgba(153, 153, 153, 1);
    border-radius: 100%;
    width: 16rpx;
    height: 16rpx;
    display: flex;
    flex-direction: column;
    margin: 14rpx 0 14rpx 0;
}

.text-group_1-0 {
    width: 446rpx;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 32rpx;
    font-family: PingFangSC-Regular;
    text-align: left;
    padding-left: 20rpx;
    white-space: nowrap;
    line-height: 44rpx;
}

.button_1 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 30rpx;
    display: flex;
    flex-direction: column;
    margin: 32rpx 542rpx 0 60rpx;
    padding: 8rpx 30rpx 8rpx 26rpx;
}

.image-text_2 {
    width: 88rpx;
    flex-direction: row;
    display: flex;
    justify-content: space-between;
}

.icon_2 {
    width: 24rpx;
    height: 26rpx;
    background: url('https://hd.kotom.cn/profile/svg/icon_add.svg') 100% no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    margin: 8rpx 0 6rpx 0;
}

.text-group_2 {
    overflow-wrap: break-word;
    color: rgba(26, 117, 255, 1);
    font-size: 28rpx;
    font-family: PingFangSC-Regular;
    text-align: center;
    white-space: nowrap;
    line-height: 40rpx;
}

.listicon1 {
    float: right;
    padding-right: 10px;
}

.listicon2 {
    float: right;
}

.addk {
    padding: 10rpx 40rpx;
    text-align: center;
}

.addbtn {
    background-color: rgba(255, 255, 255, 1) !important;
    border-radius: 80rpx;
    width: auto !important;
    border: 1px solid rgba(26, 117, 255, 1) !important;
    margin-top: 0rpx;
    padding: 15rpx 30rpx 15rpx 30rpx;
    color: #1a75ff !important;
    line-height: 30rpx;
    display: inline-block;
    font-size: 32rpx;
    float: left;
    font-weight: 400;
    line-height: 32rpx !important;
}

.tab-list-content {
    height: 60%;
}
</style>
